<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/xui.css" type="text/css" rel="stylesheet" />
<title>xui</title>
</head>

<body>

<div class="page">
  <div class="page_pr">
    <div class="pleft">
      <ul>
        <li><a href="#input">表单 &lt;form&gt;</a></li>
        <li class="on son li_input"><a href="#input">文本框</a></li>
        <li class="son li_textarea"><a href="#textarea">文本域</a></li>
        <li class="son li_select"><a href="#select">下拉框</a></li>
        <li class="son li_button"><a href="#button">按钮</a></li>
        <li class="son li_radio"><a href="#radio">单选框</a></li>
        <li class="son li_checkbox"><a href="#checkbox">复选框</a></li>
        <li class="son li_switch"><a href="#switch">开关</a></li>
        <li class="son li_file"><a href="#file">上传控件</a></li>
        <li><a href="#table_1">表格 &lt;table&gt;</a></li>
        <li class="son li_table_1"><a href="#table_1">默认样式</a></li>
        <li class="son li_table_2"><a href="#table_2">首行样式</a></li>
        <li class="son li_table_3"><a href="#table_3">无外部边框样式</a></li>
        <li class="son li_table_4"><a href="#table_4">无内部边框样式</a></li>
        <li class="son li_table_5"><a href="#table_5">无全部边框样式</a></li>
        <li class="son li_table_6"><a href="#table_6">水平边框样式</a></li>
        <li class="son li_table_7"><a href="#table_7">水平边框无外边框样式</a></li>
        <li class="son li_table_8"><a href="#table_8">圆角样式</a></li>
        <li class="son li_table_9"><a href="#table_9">行间隔背景色</a></li>
        <li class="son li_table_10"><a href="#table_10">鼠标悬停样式</a></li>
      </ul>
    </div><!--pleft-->

    <div class="pright">
      <div id="input" class="maindiv">
        <div class="page_tit">文本框 &lt;input&gt;</div>
        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span></div>
          <div class="example">
            <input class="xinput" type="text" placeholder="默认样式" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">圆角样式</div>
          <div class="page_tit3">border-radius为<span>5px</span></div>
          <div class="example">
            <input class="xinput xround" type="text" placeholder="圆角样式" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xround</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">宽度</div>
          <div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
          <div class="example">
            <input class="xinput xwidth1" type="text" placeholder="xwidth1: 250px" /><br><br>
            <input class="xinput xwidth2" type="text" placeholder="xwidth2: 300px" /><br><br>
            <input class="xinput xwidth3" type="text" placeholder="xwidth3: 350px" /><br><br>
            <input class="xinput xwidth4" type="text" placeholder="xwidth4: 400px" /><br><br>
            <input class="xinput xwidth5" type="text" placeholder="xwidth5: 450px" /><br><br>
            <input class="xinput xwidth6" type="text" placeholder="xwidth6: 500px" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xwidth1</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xwidth2</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xwidth3</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xwidth4</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xwidth5</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xwidth6</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">高度</div>
          <div class="page_tit3"><code>xheight1</code>高度为<span>38px</span>，每次增加<span>4px</span></div>
          <div class="example">
            <input class="xinput xheight1" type="text" placeholder="xheight1: 38px" /><br><br>
            <input class="xinput xheight2" type="text" placeholder="xheight2: 42px" /><br><br>
            <input class="xinput xheight3" type="text" placeholder="xheight3: 46px" /><br><br>
            <input class="xinput xheight4" type="text" placeholder="xheight4: 50px" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xheight1</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xheight2</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xheight3</span>&quot; /&gt;</span></li>
              <li><span>&lt;input class=&quot;xinput <span>xheight4</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">100%宽度</div>
          <div class="page_tit3">宽度为<span>100%</span></div>
          <div class="example">
            <input class="xinput xful" type="text" placeholder="100%宽度" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xful</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">下划线</div>
          <div class="example">
            <input class="xinput xunder" type="text" placeholder="下划线" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xunder</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">只读文本框</div>
          <div class="example">
            <input class="xinput xreadonly" type="text" value="只读文本框" readonly="readonly" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xreadonly</span>&quot; readonly=&quot;readonly&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">组合样式</div>
          <div class="page_tit3">可多个样式随意组合</div>
          <div class="example">
            <input class="xinput xful xround" type="text" placeholder="组合样式: 宽度100%+圆角" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xinput <span>xful xround</span>&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--input-->

      <div id="textarea" class="maindiv">
        <div class="page_tit">文本域 &lt;textarea&gt;</div>
        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="page_tit3">长度为<span>200px</span>，高度为<span>80px</span></div>
          <div class="example">
            <textarea class="xtext" placeholder="默认样式"></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext&quot;&gt;&lt;/textarea&gt;</span></li>
            </ol>
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">圆角样式</div>
          <div class="page_tit3">border-radius为<span>5px</span></div>
          <div class="example">
            <textarea class="xtext xround" placeholder="圆角样式"></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xround</span>&quot;&gt;&lt;/textarea&gt;</span></li>
            </ol>
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">宽度</div>
          <div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
          <div class="example">
            <textarea class="xtext xwidth1" type="text" placeholder="xwidth1: 250px" /></textarea><br><br>
            <textarea class="xtext xwidth2" type="text" placeholder="xwidth2: 300px" /></textarea><br><br>
            <textarea class="xtext xwidth3" type="text" placeholder="xwidth3: 350px" /></textarea><br><br>
            <textarea class="xtext xwidth4" type="text" placeholder="xwidth4: 400px" /></textarea><br><br>
            <textarea class="xtext xwidth5" type="text" placeholder="xwidth5: 450px" /></textarea><br><br>
            <textarea class="xtext xwidth6" type="text" placeholder="xwidth6: 500px" /></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth1</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth2</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth3</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth4</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth5</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xwidth6</span>&quot; &gt;&lt;textarea&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">高度</div>
          <div class="page_tit3"><code>xheight1</code>高度为<span>100px</span>，每次增加<span>20px</span></div>
          <div class="example">
            <textarea class="xtext xheight1" type="text" placeholder="xheight1: 100px" /></textarea><br><br>
            <textarea class="xtext xheight2" type="text" placeholder="xheight2: 120px" /></textarea><br><br>
            <textarea class="xtext xheight3" type="text" placeholder="xheight3: 140px" /></textarea><br><br>
            <textarea class="xtext xheight4" type="text" placeholder="xheight4: 160px" /></textarea><br><br>
            <textarea class="xtext xheight5" type="text" placeholder="xheight5: 180px" /></textarea><br><br>
            <textarea class="xtext xheight6" type="text" placeholder="xheight6: 200px" /></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight1</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight2</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight3</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight4</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight5</span>&quot; &gt;&lt;textarea&gt;</span></li>
              <li><span>&lt;textarea class=&quot;xtext <span>xheight6</span>&quot; &gt;&lt;textarea&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">100%宽度</div>
          <div class="page_tit3">长度为<span>100%</span></div>
          <div class="example">
            <textarea class="xtext xful" placeholder="100%宽度"></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xful</span>&quot;&gt;&lt;/textarea&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">下划线</div>
          <div class="example">
            <textarea class="xtext xunder" placeholder="下划线"></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xunder</span>&quot; &gt;&lt;/textarea&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">组合样式</div>
          <div class="page_tit3">可多个样式随意组合</div>
          <div class="example">
            <textarea class="xtext xful xround" placeholder="组合样式: 宽度100%+圆角"></textarea>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;textarea class=&quot;xtext <span>xful xround</span>&quot;&gt;&lt;/textarea&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--textarea-->

      <div id="select" class="maindiv">
        <div class="page_tit">下拉框 &lt;select&gt;</div>
        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span></div>
          <div class="example">
            <select class="xselect"><option>默认样式</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">圆角样式</div>
          <div class="page_tit3">border-radius为<span>5px</span></div>
          <div class="example">
            <select class="xselect xround"><option>圆角样式</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xround</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">深色样式</div>
          <div class="page_tit3">适用于<span>暗色调</span>场景</div>
          <div class="example">
            <select class="xselect xblack"><option>黑色样式</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xblack</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">宽度</div>
          <div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
          <div class="example">
            <select class="xselect xwidth1"><option>xwidth1: 250px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xwidth2"><option>xwidth2: 300px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xwidth3"><option>xwidth3: 350px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xwidth4"><option>xwidth4: 400px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xwidth5"><option>xwidth5: 450px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xwidth6"><option>xwidth6: 500px</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xwidth1</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">高度</div>
          <div class="page_tit3"><code>xheight1</code>高度为<span>38px</span>，每次增加<span>4px</span></div>
          <div class="example">
            <select class="xselect xheight1"><option>xheight1: 38px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xheight2"><option>xheight2: 42px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xheight3"><option>xheight3: 46px</option><option>选项2</option><option>选项3</option></select><br><br>
            <select class="xselect xheight4"><option>xheight4: 50px</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xheight1</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">100%宽度</div>
          <div class="page_tit3">长度为<span>100%</span></div>
          <div class="example">
            <select class="xselect xful"><option>100%宽度</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xful</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">组合样式</div>
          <div class="page_tit3">可多个样式随意组合</div>
          <div class="example">
            <select class="xselect xful xround"><option>组合样式: 宽度100%+圆角</option><option>选项2</option><option>选项3</option></select>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class=&quot;xselect <span>xful xround</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--select-->

      <div id="button" class="maindiv">
        <div class="page_tit">按钮 &lt;button&gt;</div>
        <table class="ptable">
          <tr class="first">
            <td width="180">class=""</td>
            <td width="350">样式</td>
            <td>代码</td>
          </tr>
          <tr>
            <td><code>xbutton</code></td>
            <td><button class="xbutton">默认按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xblue</code></td>
            <td><button class="xbutton xblue">蓝色按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xblue</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xred</code></td>
            <td><button class="xbutton xred">红色按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xred</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xyellow</code></td>
            <td><button class="xbutton xyellow">黄色按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xyellow</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xgreen</code></td>
            <td><button class="xbutton xgreen">绿色按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xgreen</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xblack</code></td>
            <td><button class="xbutton xblack">黑色按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xblack</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xround</code></td>
            <td><button class="xbutton xround">圆角按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xround</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xdisabled</code></td>
            <td><button class="xbutton xdisabled">模拟禁用按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xdisabled</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton:disabled</code></td>
            <td><button class="xbutton" disabled="disabled">真禁用按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton&quot; <span class="red">disabled="disabled"</span>&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xlit</code></td>
            <td><button class="xbutton xlit">小尺寸按钮</button> <button class="xbutton">普通按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xlit</span>&quot; &gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xful</code></td>
            <td><button class="xbutton xful">宽度100%按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xful</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
          <tr>
            <td><code>xbutton</code> <code>xblue</code> <code>xround</code></td>
            <td><button class="xbutton xblue xround">组合样式（蓝色+圆角）按钮</button></td>
            <td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xblue xround</span>&quot;&gt;按钮&lt;/button&gt;</td>
          </tr>
        </table>
      </div><!--button-->

      <div id="radio" class="maindiv">
        <div class="page_tit">单选框 &lt;input type="radio"&gt;</div>
        <div class="table_row">
          <table class="ptable">
            <tr class="first">
              <td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
              <td>描述</td>
              <td>class</td>
            </tr>
            <tr>
              <td>蓝色</td>
              <td><code>xblue</code> <code>xblue2</code></td>
            </tr>
            <tr>
              <td>红色</td>
              <td><code>xred</code> <code>xred2</code></td>
            </tr>
            <tr>
              <td>黄色</td>
              <td><code>xyellow</code> <code>xyellow2</code></td>
            </tr>
            <tr>
              <td>绿色</td>
              <td><code>xgreen</code> <code>xgreen2</code></td>
            </tr>
            <tr>
              <td>黑色</td>
              <td><code>xblack</code> <code>xblack2</code></td>
            </tr>
            <tr>
              <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong></td>
            </tr>
          </table>

          <!-- <table class="ptable">
            <tr class="first">
              <td width="180">class=""</td>
              <td>样式</td>
            </tr>
            <tr>
              <td><code>xradio</code></td>
              <td><div class="xradio"><label><input type="radio" checked="checked" /><em></em><span>默认样式</span></label></div></td>
            </tr>
            <tr>
              <td><code>xradio</code> <code>xblue</code></td>
              <td><div class="xradio xblue"><label><input type="radio" checked="checked" /><em></em><span>蓝色样式</span></label></div></td>
            </tr>
            <tr>
              <td><code>xradio</code> <code>xred</code></td>
              <td><div class="xradio xred"><label><input type="radio" checked="checked" /><em></em><span>红色样式</span></label></div></td>
            </tr>
            <tr>
              <td><code>xradio</code> <code>xyellow</code></td>
              <td><div class="xradio xyellow"><label><input type="radio" checked="checked" /><em></em><span>黄色样式</span></label></div></td>
            </tr>
            <tr>
              <td><code>radio</code> <code>xgreen</code></td>
              <td><div class="xradio xgreen"><label><input type="radio" checked="checked" /><em></em><span>绿色样式</span></label></div></td>
            </tr>
            <tr>
              <td><code>xradio</code> <code>xblack</code></td>
              <td><div class="xradio xblack"><label><input type="radio" checked="checked" /><em></em><span>黑色样式</span></label></div></td>
            </tr>
          </table> -->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="example">
            <span class="xradio"><label><input type="radio" name="radio1_1" checked="checked" /><em></em><span>默认</span></label></span>
            <span class="xradio xblue"><label><input type="radio" name="radio1_2" checked="checked" /><em></em><span>蓝色</span></label></span>
            <span class="xradio xred"><label><input type="radio" name="radio1_3" checked="checked" /><em></em><span>红色</span></label></span>
            <span class="xradio xyellow"><label><input type="radio" name="radio1_4" checked="checked" /><em></em><span>黄色</span></label></span>
            <span class="xradio xgreen"><label><input type="radio" name="radio1_5" checked="checked" /><em></em><span>绿色</span></label></span>
            <span class="xradio xblack"><label><input type="radio" name="radio1_6" checked="checked" /><em></em><span>黑色</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class="xradio"&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;默认样式&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">选中后文字也一起变色</div>
          <div class="example">
            <span class="xradio"><label><input type="radio" name="radio2_1" checked="checked" /><em></em><span>默认</span></label></span>
            <span class="xradio xblue2"><label><input type="radio" name="radio2_2" checked="checked" /><em></em><span>蓝色</span></label></span>
            <span class="xradio xred2"><label><input type="radio" name="radio2_3" checked="checked" /><em></em><span>红色</span></label></span>
            <span class="xradio xyellow2"><label><input type="radio" name="radio2_4" checked="checked" /><em></em><span>黄色</span></label></span>
            <span class="xradio xgreen2"><label><input type="radio" name="radio2_5" checked="checked" /><em></em><span>绿色</span></label></span>
            <span class="xradio xblack2"><label><input type="radio" name="radio2_6" checked="checked" /><em></em><span>黑色</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class="xradio <span>xblue2</span>"&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">纵向单选框</div>
          <div class="example">
            <div class="xradio xblue"><label><input type="radio" name="radio3_1" /><em></em><span>菠萝</span></label></div>
            <div class="xradio xblue"><label><input type="radio" name="radio3_1" /><em></em><span>芒果</span></label></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;<span>div</span> class="xradio"&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/<span>div</span>&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">横向单选框</div>
          <div class="example">
            <span class="xradio xgreen"><label><input type="radio" name="radio4_1" /><em></em><span>菠萝</span></label></span>
            <span class="xradio xgreen"><label><input type="radio" name="radio4_1" /><em></em><span>芒果</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;<span>span</span> class="xradio"&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/<span>span</span>&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--radio-->

      <div id="checkbox" class="maindiv">
        <div class="page_tit">复选框 &lt;input type="checkbox"&gt;</div>
        <div class="table_row">
          <table class="ptable">
            <tr class="first">
              <td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
              <td>描述</td>
              <td>class</td>
            </tr>
            <tr>
              <td>蓝色</td>
              <td><code>xblue</code> <code>xblue2</code></td>
            </tr>
            <tr>
              <td>红色</td>
              <td><code>xred</code> <code>xred2</code></td>
            </tr>
            <tr>
              <td>黄色</td>
              <td><code>xyellow</code> <code>xyellow2</code></td>
            </tr>
            <tr>
              <td>绿色</td>
              <td><code>xgreen</code> <code>xgreen2</code></td>
            </tr>
            <tr>
              <td>黑色</td>
              <td><code>xblack</code> <code>xblack2</code></td>
            </tr>
            <tr>
              <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong></td>
            </tr>
          </table>
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">无文字描述</div>
          <div class="example">
            <span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em></label></span>
            <span class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em></label></span>
            <span class="xcheckbox xred"><label><input type="checkbox" checked="checked" /><em></em></label></span>
            <span class="xcheckbox xyellow"><label><input type="checkbox" checked="checked" /><em></em></label></span>
            <span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em></label></span>
            <span class="xcheckbox xblack"><label><input type="checkbox" checked="checked" /><em></em></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class=&quot;xcheckbox&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">有文字描述</div>
          <div class="example">
            <span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span></label></span>
            <span class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span></label></span>
            <span class="xcheckbox xred"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span></label></span>
            <span class="xcheckbox xyellow"><label><input type="checkbox" checked="checked" /><em></em><span>黄色</span></label></span>
            <span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span></label></span>
            <span class="xcheckbox xblack"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class=&quot;xcheckbox&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span><span>&lt;span&gt;有文字描述&lt;/span&gt;</span></span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">选中后文字也一起变色</div>
          <div class="example">
            <span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span></label></span>
            <span class="xcheckbox xblue2"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span></label></span>
            <span class="xcheckbox xred2"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span></label></span>
            <span class="xcheckbox xyellow2"><label><input type="checkbox" checked="checked" /><em></em><span>黄色</span></label></span>
            <span class="xcheckbox xgreen2"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span></label></span>
            <span class="xcheckbox xblack2"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class=&quot;xcheckbox <span>xblue2</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">纵向显示</div>
          <div class="example">
            <div class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em><span>菠萝</span></label></div>
            <div class="xcheckbox xblue"><label><input type="checkbox" /><em></em><span>芒果</span></label></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;<span>div</span> class=&quot;xcheckbox&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/<span>div</span>&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">横向显示</div>
          <div class="example">
            <span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>菠萝</span></label></span>
            <span class="xcheckbox xgreen"><label><input type="checkbox" /><em></em><span>芒果</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;<span>span</span> class=&quot;xcheckbox&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/<span>span</span>&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--checkbox-->

      <div id="switch" class="maindiv">
        <div class="page_tit">开关 &lt;input type="checkbox"&gt;</div>
        <div class="page_tit3">本质上是单个的复选框</div>
        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="example">
            <input class="xswitch" type="checkbox" />
            <input class="xswitch" type="checkbox" checked="checked" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xswitch&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">带ON/OFF文字</div>
          <div class="example">
            <input class="xswitch xonoff" type="checkbox" />
            <input class="xswitch xonoff" type="checkbox" checked="checked" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xswitch <span>xonoff</span>&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">自定义文字描述</div>
          <div class="page_tit3">class="<code>xswitch-tip</code>"，为 <code>&lt;input&gt;</code> <span>自定义文字描述</span></div>
          <div class="example">
            <span class="xswitch-tip"><label><input type="checkbox" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
            <span class="xswitch-tip"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class=&quot;xswitch-tip&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">其他颜色</div>
          <div class="page_tit3">class="<code>xswitch</code>"，为 <code>&lt;input&gt;</code> 额外添加一个<span>颜色CSS</span>即可</div>
          <div class="page_tit3">class="<code>xswitch-tip</code>"，为 <code>&lt;input&gt;</code> 父标签额外添加一个<span>颜色CSS</span>即可</div>
          <div class="example">
            <div class="page_tit4">
              <input class="xswitch xblue" type="checkbox" checked="checked" />
              <input class="xswitch xred" type="checkbox" checked="checked" />
              <input class="xswitch xyellow" type="checkbox" checked="checked" />
              <input class="xswitch xgreen" type="checkbox" checked="checked" />
              <input class="xswitch xblack" type="checkbox" checked="checked" />
            </div>
            <div class="page_tit4">
              <input class="xswitch xonoff xblue" type="checkbox" checked="checked" />
              <input class="xswitch xonoff xred" type="checkbox" checked="checked" />
              <input class="xswitch xonoff xyellow" type="checkbox" checked="checked" />
              <input class="xswitch xonoff xgreen" type="checkbox" checked="checked" />
              <input class="xswitch xonoff xblack" type="checkbox" checked="checked" />
            </div>
            <div class="page_tit4">
              <span class="xswitch-tip xblue"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              <span class="xswitch-tip xred"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              <span class="xswitch-tip xyellow"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              <span class="xswitch-tip xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              <span class="xswitch-tip xblack"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
            </div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input class=&quot;xswitch <span>xblue</span>&quot; type=&quot;checkbox&quot; /&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class=&quot;xswitch-tip <span>xblue</span>&quot;&gt;</span></li>
              <li class="level2"><span>&lt;label&gt;</span></li>
              <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
              <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span></li>
              <li class="level2"><span>&lt;/label&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--switch-->

      <div id="file" class="maindiv">
        <div class="page_tit">上传控件 &lt;input type="file"&gt;</div>
        <div class="page_tit3">class="<code>xfile</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加默认样式</div>
        <div class="table_row">
          <div class="page_tit2">默认样式</div>
          <div class="example">
            <div class="xfile"><input type="file" /><span><i></i>默认样式</span></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xfile"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="page_tit3">class="<code>xfile xlit</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加小尺寸样式</div>
        <div class="table_row">
          <div class="page_tit2">小尺寸</div>
          <div class="example">
            <span class="xfile xlit"><input type="file" /><span><i></i>小尺寸</span></span>
            <span class="xfile xlit xblue"><input type="file" /><span><i></i>小尺寸</span></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class="xfile <span>xlit</span>"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">其他颜色</div>
          <div class="example">
            <span class="xfile xblue"><input type="file" /><span><i></i>蓝色样式</span></span>
            <span class="xfile xred"><input type="file" /><span><i></i>红色样式</span></span>
            <span class="xfile xyellow"><input type="file" /><span><i></i>黄色样式</span></span>
            <span class="xfile xgreen"><input type="file" /><span><i></i>绿色样式</span></span>
            <span class="xfile xblack"><input type="file" /><span><i></i>黑色样式</span></span>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;span class="xfile <span>xblue</span>"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
              <li><span>&lt;/span&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">无图标样式</div>
          <div class="example">
            <div class="xfile"><input type="file" /><span>无图标样式</span></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xfile"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;无图片样式&lt;/span&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">自定义图片样式&lt;img&gt;</div>
          <div class="page_tit3">图片无尺寸要求</div>
          <div class="example">
            <div class="xfile"><input type="file" /><span><img src="css/img.png" />自定义图片样式</span></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xfile"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;<span>&lt;img src=&quot;css/img.png&quot; /&gt;</span>自定义图片样式&lt;/span&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">自定义font样式&lt;i class=&quot;icon-<span>【自定义font class名】</span>&quot;&gt;</div>
          <div class="page_tit3">当<span>&lt;i&gt;</span>标签class包含<code>icon-</code> <code>ico-</code> <code>ion-</code> <code>glyphicon-</code> <code>fa-</code> <code>ti-</code> <code>zmdi-</code> <code>wi-</code>（常用图标库）时，默认图标会被替换成新的font图标</div>
          <div class="example">
            <div class="xfile"><input type="file" /><span><i class="icon-xiaolian"></i>自定义font样式</span></div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xfile"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;<span>&lt;i class="icon-"&gt;&lt;/i&gt;</span>自定义font样式&lt;/span&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->

        <div class="table_row">
          <div class="page_tit2">选中文件反馈</div>
          <div class="page_tit3">由于css不支持检测是否有选中文件，所以选中反馈需要添加额外的 <code>javascript</code> 代码，这是本项目唯一有用到 <code>javascript</code> 的地方</div>
          <div class="page_tit3">当然这不是必要的，你可以选择不加，只是用户体验不好，用户不知道有没有选中文件</div>
          <div class="page_tit3">本例使用了原生的 <code>javascript</code> 代码，无需加载 <code>jQuery</code></div>
          <div class="example">
            <span class="xfile"><input type="file" onchange="xfileok(this)" multiple data-oldname="sad" /><span><i></i>未选中文件</span></span>
            <span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span>无图标样式</span></span>
            <span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span><img src="css/img.png" />自定义图标样式</span></span>
            <span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span><i class="icon-xiaolian"></i>自定义font样式</span></span>
            <script>
            function xfileok(o)
            {
              //获取文件名
              let files = o.files;
              let fval;
              if(files.length>1){
                fval = files.length+"个文件";
              }else if(files.length==1){
                fval = files[0].name;
              }

              //修改文本
              let prefix = '已选择: ';
              let reg = /(\<i(\s{1,}class\=[\"\'][A-z0-9_\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9_\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;
              let span = o.parentNode.getElementsByTagName("span")[0];
              spanhtml = span.innerHTML;
              match = spanhtml.match(reg);
              oldname = span.dataset.oldname;

              html = '';
              if(match[1]){
                html += match[1];
              }
              if(fval){
                html += prefix + fval;
                span.innerHTML = html;
                if(!oldname){
                  span.dataset.oldname = match[3];
                }
              }else{
                html += oldname;
                span.innerHTML = html;
              }
            }
            </script>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xfile"&gt;</span></li>
              <li class="level2"><span>&lt;input type=&quot;file&quot; <span>onchange=&quot;xfileok(this)&quot;</span> /&gt;</span></li>
              <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;未选中文件&lt;/span&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li><span></span></li>
              <li><span>&lt;script&gt;</span></li>
              <li><span>function xfileok(o)</span></li>
              <li><span>{</span></li>
              <li class="level2"><span>//获取文件名</span></li>
              <li class="level2"><span>let files = o.files;</span></li>
              <li class="level2"><span>let fval;</span></li>
              <li class="level2"><span>if(files.length>1){</span></li>
              <li class="level3"><span>fval = files.length+&quot;个文件&quot;;</span></li>
              <li class="level2"><span>}else if(files.length==1){</span></li>
              <li class="level3"><span>fval = files[0].name;</span></li>
              <li class="level2"><span>}</span></li>
              <li><span></span></li>
              <li class="level2"><span>//修改文本</span></li>
              <li class="level2"><span>let prefix = &#39;已选择: &#39;;</span></li>
              <li class="level2"><span>let reg = /(\&lt;i(\s{1,}class\=[\&quot;\&#39;][A-z0-9_\-]*[\&quot;\&#39;])?\&gt;\&lt;\/i\&gt;|\&lt;img\s{1,}src\=[\&quot;\&#39;][A-z0-9_\/\.\-]*[\&quot;\&#39;]\s{0,}\/{0,}\&gt;)?(\S*)/;</span></li>
              <li class="level2"><span>let span = o.parentNode.getElementsByTagName(&quot;span&quot;)[0];</span></li>
              <li class="level2"><span>spanhtml = span.innerHTML;</span></li>
              <li class="level2"><span>match = spanhtml.match(reg);</span></li>
              <li class="level2"><span>oldname = span.dataset.oldname;</span></li>
              <li><span></span></li>
              <li class="level2"><span>html = &#39;&#39;;</span></li>
              <li class="level2"><span>if(match[1]){</span></li>
              <li class="level3"><span>html += match[1];</span></li>
              <li class="level2"><span>}</span></li>
              <li class="level2"><span>if(fval){</span></li>
              <li class="level3"><span>html += prefix + fval;</span></li>
              <li class="level3"><span>span.innerHTML = html;</span></li>
              <li class="level3"><span>if(!oldname){</span></li>
              <li class="level4"><span>span.dataset.oldname = match[3];</span></li>
              <li class="level3"><span>}</span></li>
              <li class="level2"><span>}else{</span></li>
              <li class="level3"><span>html += oldname;</span></li>
              <li class="level3"><span>span.innerHTML = html;</span></li>
              <li class="level2"><span>}</span></li>
              <li><span>}</span></li>
              <li><span>&lt;/script&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div><!--table_row-->
      </div><!--file-->

      <div id="table" class="maindiv">
        <div class="page_tit">表格 &lt;table&gt;</div>
        <div class="table_row">
          <table class="ptable">
            <tr class="first">
              <td width="140">标签</td>
              <td>class=""</td>
              <td>描述</td>
            </tr>
            <tr>
              <td>&lt;table&gt;</td>
              <td>&lt;table class="<code>xtable</code>"&gt;…&lt;/table&gt;</td>
              <td>表格本身</td>
            </tr>
            <tr>
              <td>&lt;table&gt;的父标签</td>
              <td>&lt;div class="<code>xtablein</code>"&gt;&lt;table&gt;…&lt;/table&gt;&lt;/div&gt;</td>
              <td>元素内的表格</td>
            </tr>
          </table>
        </div><!--table_row-->

        <div id="table_1" class="table_row">
          <div class="page_tit2">默认样式：<span>少量的内边距（padding:8px）和边框</span></div>
          <div class="page_tit3">class="<code>xtable</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>样式</span>，对下级表格不生效</div>
          <div class="page_tit3">class="<code>xtablein</code>"，为 <code>&lt;table&gt;</code> 父标签内的下一级表格增加<span>样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xtableall</code>"，为 <code>&lt;table&gt;</code> 父标签内的所有下级表格增加<span>样式</span></div>
          <div class="example">
            <table class="xtable xodd">
              <tr>
                <td width="100">A</td>
                <td width="200">B</td>
                <td>C</td>
              </tr>
              <tr>
                <td>1</td>
                <td>
                  <table class="xtable">
                    <tr>
                      <td>ASC</td>
                      <td>ASC</td>
                    </tr>
                  </table>
                </td>
                <td>
                  <table>
                    <tr>
                      <td>这是一个表格，</td>
                      <td>对下级的表格不会生效</td>
                    </tr>
                    <tr>
                      <td>aa</td>
                      <td>bb</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <p>&nbsp;</p>
            <div class="xtablein">
              <table>
                <tr>
                  <td width="100">A</td>
                  <td width="200">B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>
                    <table class="xtable">
                      <tr>
                        <td>ASC</td>
                        <td>ASC</td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <table>
                      <tr>
                        <td>这是一个表格，</td>
                        <td>对下级的表格不会生效</td>
                      </tr>
                      <tr>
                        <td>aa</td>
                        <td>bb</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
            <p>&nbsp;</p>
            <div class="xtablein xtableall xround xodd">
              <table>
                <tr>
                  <td width="100">A</td>
                  <td width="200">B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>
                    <table class="xtable">
                      <tr>
                        <td>ASC</td>
                        <td>ASC</td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <table>
                      <tr>
                        <td>这是一个表格，</td>
                        <td>对所有下级的表格生效</td>
                      </tr>
                      <tr>
                        <td>aa</td>
                        <td>bb</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li><span>&lt;div class="xtablein xtableall"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_2" class="table_row">
          <div class="page_tit2">首行样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xfirst</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>首行样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xfirst</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>首行样式</span></div>
          <div class="page_tit3">当表格存在 <span>&lt;thead&gt;</span> 时，需而外添加一个 class <code>xthead</code>，否则 <span>&lt;tbody&gt;</span> 第一行（实际上的表格第二行）也会变成<span>首行样式</span></div>
          <div class="example">
            <table class="xtable xfirst">
              <tr>
                <td rowspan="1" colspan="2">A</td>
                <td>B</td>
                <td>C</td>
              </tr>
              <tr>
                <td rowspan="2" colspan="1">1</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td>d</td>
                <td>e</td>
                <td rowspan="2" colspan="1">f</td>
              </tr>
              <tr>
                <td>2</td>
                <td>g</td>
                <td>h</td>
              </tr>
              <tr>
                <td>3</td>
                <td>i</td>
                <td rowspan="1" colspan="2">j</td>
              </tr>
            </table>
            <br / >
            <table class="xtable xfirst xthead">
              <thead>
                <tr>
                  <td>A</td>
                  <td>B</td>
                  <td>C</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                </tr>
                <tr>
                  <td>d</td>
                  <td>e</td>
                  <td>f</td>
                </tr>
              </tbody>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xnobor-out</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xnobor-out</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li>/**********/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xthead</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>&lt;thead&gt;</span></li>
              <li class="level4"><span>…</span></li>
              <li class="level3"><span>&lt;/thead&gt;</span></li>
              <li class="level3"><span>&lt;tbody&gt;</span></li>
              <li class="level4"><span>…</span></li>
              <li class="level3"><span>&lt;/tbody&gt;</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_3" class="table_row">
          <div class="page_tit2">无外部边框样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xnobor-out</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无外部边框样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xnobor-out</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无外部边框样式</span></div>
          <div class="example">
            <table class="xtable xnobor-out">
              <tr>
                <td rowspan="1" colspan="2">A</td>
                <td>B</td>
                <td>C</td>
              </tr>
              <tr>
                <td rowspan="2" colspan="1">1</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td>d</td>
                <td>e</td>
                <td rowspan="2" colspan="1">f</td>
              </tr>
              <tr>
                <td>2</td>
                <td>g</td>
                <td>h</td>
              </tr>
              <tr>
                <td>3</td>
                <td>i</td>
                <td rowspan="1" colspan="2">j</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xnobor-out</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xnobor-out</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_4" class="table_row">
          <div class="page_tit2">无内部边框样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xnobor-in</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无内部边框样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xnobor-in</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无内部边框样式</span></div>
          <div class="example">
            <table class="xtable xnobor-in">
              <tr>
                <td>1</td><td>2</td><td>3</td>
              </tr>
              <tr>
                <td>4</td><td>5</td><td>6</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xnobor-in</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xnobor-in</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_5" class="table_row">
          <div class="page_tit2">无全部边框样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xnobor-all</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无全部边框样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xnobor-all</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无全部边框样式</span></div>
          <div class="example">
            <table class="xtable xnobor-all">
              <tr>
                <td>1</td><td>2</td><td>3</td>
              </tr>
              <tr>
                <td>4</td><td>5</td><td>6</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xnobor-all</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xnobor-all</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_6" class="table_row">
          <div class="page_tit2">水平边框样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xbor-tr</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>水平边框样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>水平边框样式</span></div>
          <div class="example">
            <table class="xtable xbor-tr">
              <tr>
                <td rowspan="1" colspan="2">A</td>
                <td>B</td>
                <td>C</td>
              </tr>
              <tr>
                <td rowspan="2" colspan="1">1</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td>d</td>
                <td>e</td>
                <td rowspan="2" colspan="1">f</td>
              </tr>
              <tr>
                <td>2</td>
                <td>g</td>
                <td>h</td>
              </tr>
              <tr>
                <td>3</td>
                <td>i</td>
                <td rowspan="1" colspan="2">j</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xbor-tr</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xbor-tr</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_7" class="table_row">
          <div class="page_tit2">水平边框无外边框样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xbor-tr-noout</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>水平边框无外边框样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr-noout</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>水平边框无外边框样式</span></div>
          <div class="example">
            <table class="xtable xbor-tr-noout">
              <tr>
                <td rowspan="1" colspan="2">A</td>
                <td>B</td>
                <td>C</td>
              </tr>
              <tr>
                <td rowspan="2" colspan="1">1</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tr>
              <tr>
                <td>d</td>
                <td>e</td>
                <td rowspan="2" colspan="1">f</td>
              </tr>
              <tr>
                <td>2</td>
                <td>g</td>
                <td>h</td>
              </tr>
              <tr>
                <td>3</td>
                <td>i</td>
                <td rowspan="1" colspan="2">j</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xbor-tr-noout</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xbor-tr-noout</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_8" class="table_row">
          <div class="page_tit2">圆角样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xround</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>圆角样式</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xround</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>圆角样式</span></div>
          <div class="example">
            <table class="xtable xround">
              <tr>
                <th>1</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
              <tr>
                <td rowspan="2">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xround</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xround</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_9" class="table_row">
          <div class="page_tit2">行间隔背景色 <span>奇数(xodd) 或 偶数(xeven)</span></div>
          <div class="page_tit3">class="<code>xtable</code> <code>xodd</code> / <code>xeven</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>行间隔背景色</span></div>
          <div class="page_tit3">class="<code>xtablein</code> <code>xodd</code> / <code>xeven</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>行间隔背景色</span></div>
          <div class="example">
            <table class="xtable xodd">
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
            </table>
            <br />
            <table class="xtable xeven">
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xodd</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xodd</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li>/****************或****************/</li>
              <li></li>
              <li><span>&lt;table class="xtable <span>xeven</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xeven</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->

        <div id="table_10" class="table_row">
          <div class="page_tit2">鼠标悬停样式</div>
          <div class="page_tit3">class="<code>xtable</code> <code>xhover</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>鼠标悬停样式</span></div>
          <div class="page_tit3">class="<code>xtable</code> <code>xhover</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>鼠标悬停样式</span></div>
          <div class="example">
            <table class="xtable xhover">
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
            </table>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;table class="xtable <span>xhover</span>"&gt;</span></li>
              <li class="level2"><span>…</span></li>
              <li><span>&lt;/table&gt;</span></li>
              <li></li>
              <li>/****或****/</li>
              <li></li>
              <li><span>&lt;div class="xtablein <span>xhover</span>"&gt;</span></li>
              <li class="level2"><span>&lt;table&gt;</span></li>
              <li class="level3"><span>…</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div>
        </div><!--table_row-->
      </div><!--table-->

      <div class="table_row">
        <div class="page_tit3" style="text-align:right;">本项目为<span>纯css项目</span>，参考了Bootstrap</div>
      </div><!--table_row-->
    </div><!--pright-->
  </div><!--page_pr-->
</div><!--page-->

<!--以下为非必要代码-->
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="font/iconfont.css" type="text/css" rel="stylesheet" />
<script>
$(window).scroll(function()
{
	saction();
});
function saction()
{
	liarr = new Array("input","textarea","select","button","radio","checkbox","switch","file","table_1","table_2","table_3","table_4","table_5","table_6","table_7","table_8","table_9","table_10");
	d = new Array();
	t = $(window).scrollTop();
	for(i=0;i<liarr.length;i++)
	{
		d[i] = $("#"+liarr[i]).offset().top-50; //提前50像素生效
		if(t>d[i])
		{
			$(".li_"+liarr[i]).addClass("on").siblings().removeClass("on");
		}
	}
}
window.onload=function(){
	bheight = window.innerHeight-20;
	pheight = $(".pleft").height();
	if(bheight<pheight){
		$(".pleft").addClass("pleft_no");
	}
}

//复制代码
$(document).on("click",".precopy",function(){
	pa = $(this).parents(".pre");
	olheight = $(pa).find("ol").height();
	if($(pa).find(".precode").is(":hidden"))
	{
		ol = $(pa).find("ol li");
		$(pa).find(".precode").css({"height":olheight+"px"});
		html = '<textarea class="xtext xful">';
		for(i=0;i<ol.length;i++)
		{
			if($(this).hasClass("precopy2"))
			{
				if($(ol[i]).hasClass("level2")){
          html += "&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level3")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level4")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level5")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level6")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level7")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level8")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level9")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }else if($(ol[i]).hasClass("level9")){
          html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }
			}

			if($(ol[i]).find("span").html())
			{
        text = $(ol[i]).find("span").html();
        text = text.replace(/\<\/{0,1}span\>/g,"");  //去除span标签
				html += text;
			}

			if(i!=ol.length-1 && $(this).hasClass("precopy2")){
				html += "\n";
			}
		}
		html += '</textarea>';
		$(pa).find(".precode").html(html);
		$(pa).find("ol").hide();
		$(pa).find(".precode").show();
		$(pa).find(".precode textarea").select();
	}
	else
	{
		$(pa).find("ol").show();
		$(pa).find(".precode").hide();
		$(pa).find(".precode").html("");
		$(pa).find(".precode").css({"height":""});
	}
})
$(document).on("blur",".precode textarea",function(){
	$(this).parents(".pre").find("ol").show();
	$(this).parent(".precode").hide();
	$(this).parent(".precode").html("");
})

//代码暗色调
$(document).on("click",".pretype",function(){
	$(this).parents(".pre").toggleClass("on");
})
</script>

</body>
</html>